<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    插槽基础：
      先需要了解一个知识点：
        组件开始标签与结束标签中写的内容默认是不会被渲染的。
      有时，我们是期望开始标签与闭合标签中的内容能渲染出去的。这时就需要使用到插槽技术。

    插槽的内容与插槽出口
      插槽的内容: 写在组件开始标签与闭合标签中的内容。
      插槽出口: 一个 <slot /> 元素

    渲染作用域
      插槽内容中使用的数据找谁要的问题

        父组件模板中的表达式只能访问父组件的作用域；
        子组件模板中的表达式只能访问子组件的作用域。
      
    默认内容
      插槽出口 <slot /> 元素中可以写内容，这段内容就叫做默认内容。当我们使用组件时没有传递插槽内容时，该坑位就会渲染成它的默认内容
   -->

    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <base-button>
            Hello - {{ name }}
          </base-button>

          <base-button></base-button>
        `,

        data() {
          return {
            name: "张三",
          };
        },
      });

      app.component("base-button", {
        template: `
          <button>
            <slot>
              默认内容  
            </slot>
          </button>
        `,
        data() {
          return {
            name: "里斯",
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
